<template>
	<view class="page">
		<!-- 头部 -->
		<view class="head-info">
			<!-- 搜索 -->
			<view class="head-search">
				<view class="icon-info" @click="onCode">
					<text class="iconfont icon-saoyisao"></text>
					<!-- <image src="/static/xiaoxi_ico.png" mode=""></image> -->
				</view>
				<view class="search" @click="onSearch">
					<view class="icon">
						<image src="/static/fdj_ico.png" mode=""></image>
					</view>
					<view class="hint">
						<text class="max">搜索</text>
						<text class="min">热门内容</text>
					</view>
				</view>
				<view class="icon-info" @click="onSkip('paycode')">
					<text class="iconfont icon-fukuanma"></text>
					<!-- <image src="/static/fkm_ico.png" mode=""></image> -->
				</view>
			</view>
			<!-- 分类列表 -->
			<view class="classify-list">
				<view class="list" v-for="(item,index) in classList" :class="{'action':classifyShow==index}" @click="onClassify(item,index)"
				 :key="index">
					<text>{{item.name}}</text>
					<text class="line" v-show="classifyShow==index"></text>
				</view>
			</view>
		</view>

		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :top="0">
			<view class="main" v-show="classifyShow === 0">

				<!-- banner -->
				<banner :bannerList="bannerList"></banner>

				<!-- 菜单导航 -->
				<MenuNav></MenuNav>

				<!-- 通知 -->
				<inform></inform>

				<!-- 限时抢购，好货精选 -->
				<flash-good :promotionList="promotionList"></flash-good>

				<!-- 今日上新 -->
				<new-product :newGoods="newGoods"></new-product>

				<!-- 为你推荐 -->
				<recommend-info :pickGoods="pickGoods"></recommend-info>
			</view>
		</mescroll-body>
		
		<ClassifyData v-show="classifyShow != 0" :classifyId="classifyId"></ClassifyData>
		<!-- tabbar -->
		<TabBar :tabBarShow="0"></TabBar>
	</view>
</template>

<script>
	// 公共
	import common from '@/common/common.js'
	
	// 请求接口
	import $goods from '@/utils/api/goods.js';
	import $home from '@/utils/api/home.js';
	import $advert from '@/utils/api/advert.js';

	// 组件
	import HeadInfo from './components/head-info.vue';
	import Banner from './components/banner.vue';
	import MenuNav from './components/menu-nav.vue';
	import Inform from './components/inform.vue';
	import FlashGood from './components/flash-good.vue';
	import NewProduct from './components/new-product.vue';
	import RecommendInfo from './components/recommend-info.vue';

	import TabBar from "../../components/TabBar/TabBar.vue";
	import ClassifyData from "../../components/ClassifyData/ClassifyData.vue";
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	import shMenu from "@/components/home/sh-menu.vue";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			TabBar,
			ClassifyData,
			shMenu,
			HeadInfo,
			Banner,
			MenuNav,
			Inform,
			FlashGood,
			NewProduct,
			RecommendInfo,
		},
		data() {
			return {
				bannerList: [],
				promotionList:[],
				pickGoods: [],
				classifyId: 0,
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					use: false,
				},
				newGoods:[],
				swiperList: [{
						id: 0,
						type: "image",
						url: "/static/img/banner_01.png",
					},
					{
						id: 1,
						type: "image",
						url: "/static/img/banner_02.png",
					},
					{
						id: 2,
						type: "image",
						url: "/static/img/banner_03.png",
					},
					{
						id: 3,
						type: "image",
						url: "/static/img/banner_04.png",
					},
					{
						id: 4,
						type: "image",
						url: "/static/img/banner_01.png",
					},
					{
						id: 5,
						type: "image",
						url: "/static/img/banner_01.png",
					},
				],
				slideNum: 0,
				navList: [{
						id: 1,
						name: "手机专区",
					},
					{
						id: 2,
						name: "潮牌男装",
					},
					{
						id: 3,
						name: "运动男装",
					},
					{
						id: 4,
						name: "时尚背包",
					},
					{
						id: 5,
						name: "台式电脑",
					},
					{
						id: 6,
						name: "珠宝首饰",
					},
					{
						id: 7,
						name: "美颜美妆",
					},
					{
						id: 8,
						name: "家用电器",
					},
					{
						id: 9,
						name: "洗护用品",
					},
					{
						id: 10,
						name: "台式电脑",
					},
				],
				classList: [{
					id: 0,
					name: "首页"
				}],
				classifyShow: 0,
				// 页面高度
				pageHeight: 500,
			};
		},
		onReady() {
			uni.hideTabBar();
			// #ifdef MP
			uni.setNavigationBarTitle({
				title: "首页",
			});
			uni.setNavigationBarColor({
				frontColor: "#ffffff",
				backgroundColor: "#fe3b0f",
			});
			// #endif
		},
		onLoad() {
			this.getCateList()
			this.getBannerList()
			this.getNewGoods()
			this.getPromotionList()
			this.getPickGoods()
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop;
			if (scrollTop > 0) {
				this.pageHeight = 210;
			} else {
				this.pageHeight = 500;
			}
		},
		onReachBottom() {
			console.log(12333);
		},
		created() {
			
		},
		methods: {
			// 获取首页商品分类列表
			getCateList() {
				var cache_data = common.cache('cat_list', null)
				if(cache_data){
					this.classList = cache_data
				}else{
					$goods.get_cat_list({}, 'GET').then(res => {
						
						this.classList = this.classList.concat(res.data)
						common.cache('cat_list', this.classList, 3600)
					});
				}
				// $goods.get_cat_list({}, 'GET').then(res => {
				// 	this.classList = this.classList.concat(res.data)
				// });
			},
			// 轮播图列表
			getBannerList(){
				$advert.get_banner_list({}, 'get').then(res => {
					res.data.forEach(function(arr){
						arr.url = common.baseUrl + arr.url
					})
					// console.log(res);
					this.bannerList = res.data
				});
			},
			// 秒杀商品
			getPromotionList(){
				// uni.removeStorageSync('pro_list_'+2)
				var cache_data = common.cache('pro_list_'+2, null)
				if(cache_data){
					this.promotionList = cache_data.slice(0,2)
				}else{
					let param = {
						type: 4,
						select_action: 2
					};
					$goods.get_promotion_list(param, 'GET').then(res => {
						this.promotionList = (res.data).slice(0,2)
						common.cache('pro_list_'+2, res.data, 3600)
					});
				}
			},
			// 今日上新
			getNewGoods(){
				var cache_data = common.cache('new_goods', null)
				if(cache_data){
					this.newGoods = cache_data
					// console.log('今日上新');
					// console.log(this.newGoods);
				}else{
					$goods.get_new_goods({}, 'GET').then(res => {
						this.newGoods = res.data
						common.cache('new_goods', res.data, 3600)
					});
				}
			},
			// 推荐商品
			getPickGoods(){
				// uni.removeStorageSync('pick_goods')
				var cache_data = common.cache('pick_goods', null)
				if(cache_data){
					this.pickGoods = cache_data
				}else{
					let param = {
						// field: '',
						page: 1,
						limit: 10
					};
					$goods.get_pick_goods(param, 'GET').then(res => {
						this.pickGoods = res.data.list
						common.cache('pick_goods', res.data.list, 3600)
					});
				}
			},

			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() => {
					this.mescroll.endByPage(10, 20);
				}, 2000);
			},
			/**
			 * 菜单导航滚动
			 */
			ScrollMenu(e) {
				let scrollLeft = e.target.scrollLeft;
				const query = uni.createSelectorQuery().in(this);
				query
					.select(".nav")
					.boundingClientRect((data) => {
						let wid = e.target.scrollWidth - data.width - (data.left * 2 + 5);
						this.slideNum = ((scrollLeft / wid) * 300) / 2;
					})
					.exec();
			},
			/**
			 * 搜索点击
			 */
			onSearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				});
			},
			/**
			 * 扫一扫点击
			 */
			onCode() {
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log("条码类型：" + res.scanType);
						console.log("条码内容：" + res.result);
					},
				});
			},
			/**
			 * 分类点击
			 * @param {Object} item
			 * @param {Number} index
			 */
			onClassify(item, index) {
				this.classifyShow = index;
				this.classifyId = item.id
				// console.log(this.classifyId);
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case "mess":
						uni.navigateTo({
							url: "/pages/Message/Message",
						});
						break;
					case "paycode":
						uni.navigateTo({
							url: "/pages/PaymentCode/PaymentCode",
						});
						break;
					case "menu":
						uni.navigateTo({
							url: "/pages/SearchGoodsList/SearchGoodsList",
						});
						break;
					case "inform":
						break;
					case "flash":
						uni.navigateTo({
							url: "/pages/FlashSale/FlashSale",
						});
						break;
					case "GoodChoice":
						uni.navigateTo({
							url: "/pages/GoodChoice/GoodChoice",
						});
						break;
					case "goods":
						uni.navigateTo({
							url: "/pages/GoodsDetails/GoodsDetails",
							animationType: "zoom-fade-out",
							animationDuration: 200,
						});
						break;
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	@import "home.scss";
</style>
